<template>
  <div class="mapbj">
    <img src="@/assets/img/home/wencheng.png" usemap="#Map" border="0" style="width: 32.75rem; height: 34.9375rem;" />
    <map name="Map" id="Map">
      <!-- 南田镇 -->
      <div class="nantian map_icon" @click="switchMaptwo(1, '南田镇','330328102000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="66,41,83,34,96,34,107,40,119,54,134,62,162,41,182,28,199,29,214,41,219,52,214,65,208,67,277,80,292,77,306,68,313,61,324,72,329,87,326,109,315,121,294,128,273,131,249,135,231,146,226,164,214,177,201,177,190,170,190,159,187,146,180,135,169,131,148,131,128,132,114,127,108,113,107,101,98,84,84,79,73,77,68,62,62,48"
        />
      </div>
      <!-- 西坑畲族镇 -->
      <div class="xikang map_icon" @click="switchMaptwo(2, '西坑畲族镇','330328103000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="77,83,87,84,100,96,106,113,117,134,132,140,151,138,167,136,182,142,189,162,197,180,211,194,226,218,225,234,214,254,197,260,181,268,154,269,126,272,110,283,92,290,80,292,78,266,73,245,65,228,53,225,40,236,15,262,10,249,11,228,26,139,12,106,13,96,32,93,75,109,79,101,72,85"
        />
      </div>
      <!-- 玉壶镇 -->
      <div class="yuhu map_icon" @click="switchMaptwo(3, '玉壶镇','330328107000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="320,53,336,27,353,18,386,13,428,14,453,9,447,44,458,61,496,75,514,98,511,122,491,148,474,157,479,169,449,210,439,180,428,172,414,170,370,165,367,140,362,130,333,118,336,95,333,73"
        />
      </div>
      <!-- 百丈漈镇 -->
      <div class="baizhang map_icon" @click="switchMaptwo(4, '百丈漈镇','330328101000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="244,142,274,135,288,133,314,130,325,121,350,125,358,133,357,145,341,169,333,184,333,215,321,224,301,231,269,235,254,245,228,229,227,215,216,189,213,181,231,158"
        />
      </div>
      <!-- 大峃镇 -->
      <div class="daxue map_icon" @click="switchMaptwo(5, '大峃镇','330328100000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="361,141,366,161,365,168,364,173,374,176,404,175,422,176,437,185,439,196,443,210,443,218,436,226,436,239,448,246,452,260,428,287,410,302,399,313,372,314,362,330,353,342,333,335,321,333,316,325,296,293,259,260,255,244,274,235,315,227,330,213,337,195,339,180"
        />
      </div>
      <!-- 黄坦镇 -->
      <div class="huangtan map_icon" @click="switchMaptwo(6, '黄坦镇','330328104000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="89,300,98,318,115,336,114,350,106,373,112,390,143,397,181,392,221,385,242,376,275,367,304,353,309,335,300,307,279,288,264,273,252,261,252,254,232,238,217,248,208,257,183,270,151,274,122,276"
        />
      </div>
      <!-- 峃口镇 -->
      <div class="xuekou map_icon" @click="switchMaptwo(7, '峃口镇','330328108000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="462,256,503,296,514,320,511,333,494,350,478,366,471,381,441,389,414,392,405,375,406,348,393,332,379,319,395,322,409,321,409,311,429,296,449,279"
        />
      </div>
      <!-- 巨屿镇 -->
      <div class="juyu map_icon" @click="switchMaptwo(8, '巨屿镇','330328106000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="308,360,345,385,380,412,384,402,397,392,411,392,405,380,403,351,393,332,382,328,371,322,363,337,358,348,338,349,330,343,316,339" />
      </div>
      <!-- 珊溪镇 -->
      <div class="shanxi map_icon" @click="switchMaptwo(9, '珊溪镇','330328105000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="303,362,376,415,367,424,380,487,357,527,348,548,337,547,310,533,286,523,286,499,267,473,242,468,228,465,246,420,250,396,225,384" />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapWenCheng',

  data () {
    return {
      qxname: '文成县',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330328000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapbj {
  position: absolute;
  top: 10.5%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}
.nantian {
  position: absolute;
  top: 0%;
  left: 22%;
}
.xikang {
  position: absolute;
  top: 20%;
  left: 0%;
}
.baizhang {
  position: absolute;
  top: 12%;
  left: 45%;
}
.yuhu {
  position: absolute;
  top: 6%;
  left: 64%;
}
.huangtan {
  position: absolute;
  top: 49%;
  left: 17%;
}
.daxue {
  position: absolute;
  top: 25%;
  left: 59%;
}
.xuekou {
  position: absolute;
  top: 46%;
  left: 74%;
}
.juyu {
  position: absolute;
  top: 49%;
  left: 56%;
}
.shanxi {
  position: absolute;
  top: 70%;
  left: 49%;
}
</style>
